{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import datetime %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,reportFormForRole %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    '@jquery_ui_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-body">
                <div class="widget-header">
                    <h5 class="widget-title">{{ 'Report Condition'|trans }}</h5>
                </div>
                <div class="widget-main no-padding">
                    <form action="javascript:loading_chart()" method="post" id="searchForm">
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="time_stamp">{{ 'Statistical Cycle'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <select id="time_stamp" class="input-sm" onchange="setDatetimepicker(this.value)">
                                        <option value="0">{{ 'Stamp Date'|trans }}</option>
                                        <option value="1">{{ 'Stamp Month'|trans }}</option>
                                        <option value="2">{{ 'Stamp Custom'|trans }}</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="start_date">{{ 'Date'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    {{ datetime('start_date',date.startDate) }}
                                    {{ datetime('end_date',date.endDate) }}
                                </td>
                            </tr>
                            <tr id="statistical_type">
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="statistical_type">{{ 'Statistical Type'|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <label>
                                        <input type="radio" class="ace" id="type_queue" name="type" checked value="queue">
                                        <span class="lbl"> {{ 'By Queue'|trans }}</span>
                                    </label>
                                    <label>
                                        <input type="radio" class="ace" id="type_number" name="type" value="number">
                                        <span class="lbl"> {{ 'By Number'|trans }}</span>
                                    </label>
                                    {% if isEnableGroup == 1 %}
                                    <label>
                                        <input type="radio" class="ace" id="type_group" name="type" value="group">
                                        <span class="lbl"> {{ 'By Group'|trans }}</span>
                                    </label>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <span id="choseText"></span>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                <select id="forStatisticalChosen" data-placeholder="请选择" class="chosen-select" multiple style="width:35%"></select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-center">
                                    <button id="loading-btn" type="submit" class="btn btn-info btn-sm">
                                        <i class="ace-icon fa fa-search"></i> {{ 'Inquiry'|trans }}
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div style="margin-bottom: 50px;">
            <table id="grid-table"></table>
        </div>
        <!-- /section:custom/widget-box -->
        <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    </div>
{% endblock %}

{% block footer %}
    {{ parent() }}
    {% javascripts
    'bundles/icsocivr/js/jquery.ztree.all-3.5.min.js'
    'bundles/icsocreport/js/echarts-all.js'
    '@datepicker_js'
    '@jqgird_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                caption: "{{ caption|trans({'%start_date%': date.startDate, '%end_date%': date.endDate}) }}",
                url: "{{ path('icsoc_report_charts_inhour_getDataForInhourList') }}",
                hidegrid:false,
                postData: {data:jsonToString(getCondition())},
                mtype: 'POST',
                datatype: "json",
                colModel:[
                    {name: 'start_hour', index: 'start_hour', label: '{{ 'Start hour'|trans }}', width: 100, sortable: false, align: 'center'},
                    {name: 'total', index: 'total', label: '{{ 'Total nums'|trans }}', width: 100, sortable: false, align: 'center'},
                    {name: 'mobile_nums', index: 'mobile_nums', label: '{{ 'Mobile nums'|trans }}', width: 100, sortable: false, align: 'center'},
                    {name: 'tel_nums', index: 'tel_nums', label: '{{ 'Tel nums'|trans }}', width: 100, sortable: false, align: 'center'},
                ],
                {{ gridConfig(true) }}
                rownumWidth: 30,
                fit: true,
                viewrecords: true, //定义是否要显示总记录数
                rowNum: -1,  //默认每页显示多少条数据
                multiselect: false,
                rownumbers: true,
                footerrow:true,
                userDataOnFooter:true,
                records:true,
            });
            {{ gridNav(false,false,false,false,true,false) }}
        });


        var myChart = echarts.init(document.getElementById('main'));
        $(document).ready(function() {
            {% if type.agent is defined and type.agent == 1 and type.group is defined and type.group == 1 %}
            $('#main').css('height',$(document).height() - 240);
            {% else %}
            $('#main').css('height',$(document).height() - 200);
            {% endif %}
            /**
             * 设置统计周期
             */
            var time_stamp = $('#time_stamp').val();
            $('#start_date').datetimepicker();
            setDatetimepicker(time_stamp);

            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'number') {
                $('#choseText').html("{{ 'Number'|trans }}:");
            } else if (statistical_type == 'group'){
                $('#choseText').html("{{ 'Group'|trans }}:");
            } else {
                $('#choseText').html("{{ 'Queue'|trans }}:");
            }
            $('.chosen-select').chosen();
            getDataForChosenSelect(statistical_type);
            /**
             * 加载统计范围
             */
            $("input[name='type']").click(function () {
                var statistical_type = $("input[name='type']:checked").val();
                if (statistical_type == 'number') {
                    $('#choseText').html("{{ 'Number'|trans }}");
                } else if (statistical_type == 'group'){
                    $('#choseText').html("{{ 'Group'|trans }}");
                } else {
                    $('#choseText').html("{{ 'Queue'|trans }}");
                }
                $('.chosen-select').chosen();
                getDataForChosenSelect(statistical_type);
            });

            myChart.setOption({"series":[{"name":"","type":"bar"}]});
            myChart.showLoading({
                'text':'读取中...',
                'effect':'bubble'
            });
            loading_chart();
        });

        /**
         *获取搜索条件
         */
        function getCondition()
        {
            var data = {};
            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'undefined') {
                alert('请选择统计类型');
                return;
            }

            data.chartType = statistical_type;
            var chosenVal = $('#forStatisticalChosen').val();
            data.chosenVal = chosenVal;
            data.time_stamp = $('#time_stamp').val();
            data.start_date = $.trim($('#start_date').val());
            data.end_date = $.trim($('#end_date').val());

            return data;
        }

        /**
         * 加载图表
         */
        function loading_chart(magicType)
        {
            if (!$('#start_date').val()) {
                $('#start_date').parent().parent().addClass('has-error');
                $('#start_date').focus();
                return;
            }

            var data = {};
            var statistical_type = $("input[name='type']:checked").val();
            if (statistical_type == 'undefined') {
                alert('请选择统计类型');
                return;
            }

            setSearchDate();
            $('#grid-table').setGridParam({postData:{data:jsonToString(getCondition())}}).trigger("reloadGrid");

            data.chartType = statistical_type;
            var chosenVal = $('#forStatisticalChosen').val();
            data.chosenVal = chosenVal;
            data.time_stamp = $('#time_stamp').val();
            data.start_date = $.trim($('#start_date').val());
            data.end_date = $.trim($('#end_date').val());
            data.magicType = magicType;
            $.ajax({
                url:'{{ path(action) }}',
                data:data,
                type:'POST',
                dataType:'json',
                success:function(responce){
                    myChart.dispose();
                    myChart = echarts.init(document.getElementById('main'));
                    if (responce.code == 200) {
                        if ("undefined" != typeof responce.data.toolbox.feature.myTool && responce.data.toolbox.feature.myTool.show == 1) {
                            //responce.data.toolbox.feature.myTool.icon = "{{ asset('bundles/icsocivr/images/2.gif') }}";
                            responce.data.toolbox.feature.myTool.onclick = function (){
                                loading_chart( responce.data.toolbox.feature.myTool.magicType);
                            };
                        }
                        myChart.setOption(responce.data);
                    } else {
                        myChart.setOption({"series":[{"name":"","type":"pie"}]});
                    }
                }
            });
        }

        /**
         * 根据搜索条件设置数据列表的时间
         */
        function setSearchDate()
        {
            var startDate = $('#start_date').val();
            var time_stamp = $('#time_stamp').val();
            if (time_stamp == 0) {
                $('#grid-table').jqGrid('setCaption', '按小时进线图表 【时间级别：小时 统计时段 '+startDate+' ~ '+startDate+'】');
            } else if (time_stamp == 1) {
                var year = startDate.substring(0,4);
                var month = startDate.substring(6);
                var day = new Date(year,month,0);
                var lastDate = year + '-' + month + '-' + day.getDate();
                $('#grid-table').jqGrid('setCaption', '按小时进线图表 【时间级别：小时 统计时段 '+startDate+'-01 ~ '+lastDate+'】');
            } else {
                var endDate = $('#end_date').val();
                $('#grid-table').jqGrid('setCaption', '按小时进线图表 【时间级别：小时 统计时段 '+startDate+' ~ '+endDate+'】');
            }
        }

        /**
         * 日期设置
         */
        function setDatetimepicker(type)
        {
            $('#start_date').data("DateTimePicker").destroy();

            switch (type) {
                case '0':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').hide();
                    break;
                case '1':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM',
                        locale: 'zh-cn'
                    }).val('{{ date.startMonth }}');
                    $('#end_date').hide();
                    break;
                case '2':
                    $('#start_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.startDate }}');
                    $('#end_date').datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    }).val('{{ date.endDate }}').show();
                    break;
            }
        }

        /**
         * 获取下拉框的具体数值
         */
        function getDataForChosenSelect(param)
        {
            $.ajax({
                url: "{{ path('icsoc_report_charts_getDataForChosenSelect') }}",
                type: 'post',
                data: {chosenType:param},
                success: function (response) {
                    $('#forStatisticalChosen').html('');
                    $('#forStatisticalChosen').append(response);
                    $("#forStatisticalChosen").trigger("chosen:updated");
                }
            });
        }
    </script>
{% endblock %}